@import "~antd/lib/style/themes/default.less";

.main {
	width: 400px;
	position: absolute;
	top: 50%;
	right: 16%;
	/* position: absolute; */
	margin: -215px 0 0 0;
	@media screen and (max-width: @screen-sm) {
		width: 95%;
		position: unset;
	}

	.icon {
		margin-left: 16px;
		color: rgba(0, 0, 0, 0.2);
		font-size: 24px;
		vertical-align: middle;
		cursor: pointer;
		transition: color 0.3s;

		&:hover {
			color: @primary-color;
		}
	}

	.other {
		margin-top: 24px;
		line-height: 22px;
		text-align: left;

		.register {
			float: right;
		}
	}

	.loginBox {
		// height: 430px;
		width: 400px;
		// background-image: url("../../assets/loginBox.png");
		background-repeat: no-repeat;
		background-size: 100%;
		background: #ffffff;
		box-shadow: 0px 2px 16px 0px rgba(14, 5, 9, 0.08);
		border-radius: 8px;
	}
	.logoTitle {
		width: 167px;
		height: 60px;
		background-image: url("../../assets/logoTitle.png");
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0 auto 30px;
	}
	.robotTitle {
		text-align: center;
		font-size: 24px;
		color: #f1f3f7;
		letter-spacing: 4px;
		padding: 20px 0 10px 0px;
		font-size: 30px;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		img {
			margin-right: 12px;
		}
	}
	.loginForm {
		width: 85%;
		margin: 0 auto;
    padding-bottom: 10px;
	}
	.formLabel {
		color: #333333;
	}
	.qywxLogin {
		background: #f3f7fb;
		border-radius: 0px 0px 8px 8px;
		padding: 28px;
		text-align: center;
		cursor: pointer;
		margin-top: 20px;
		img {
			width: 24px;
			margin-right: 7px;
		}
	}
}

.mainReg {
	width: 400px;
	position: absolute;
	top: 38%;
	right: 16%;
	margin: -215px 0 0 0;
	@media screen and (max-width: @screen-sm) {
		width: 95%;
		position: unset;
	}

	.icon {
		margin-left: 16px;
		color: rgba(0, 0, 0, 0.2);
		font-size: 24px;
		vertical-align: middle;
		cursor: pointer;
		transition: color 0.3s;

		&:hover {
			color: @primary-color;
		}
	}

	.other {
		margin-top: 24px;
		line-height: 22px;
		text-align: left;

		.register {
			float: right;
		}
	}

	.logoTitle {
		width: 167px;
		height: 60px;
		background-image: url("../../assets/logoTitle.png");
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0 auto 30px;
	}
	.robotTitle {
		text-align: center;
		font-size: 24px;
		color: #f1f3f7;
		letter-spacing: 4px;
		padding: 20px 0 10px 0px;
		font-size: 30px;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		img {
			margin-right: 12px;
		}
	}
	.loginForm {
		width: 85%;
		margin: 0 auto;
	}
	.formLabel {
		color: #333333;
	}
	.qywxLogin {
		background: #f3f7fb;
		border-radius: 0px 0px 8px 8px;
		padding: 28px;
		text-align: center;
		cursor: pointer;
		margin-top: 20px;
		img {
			width: 24px;
			margin-right: 7px;
		}
	}
}

.banner {
	position: absolute;
	top: 50%;
	left: 16%;
	margin-top: -216px;
}

@media screen and (max-width: 1024px) {
  .loginBox{
    // width: 300px;
  }
  .banner {
    img{
      width: 350px !important;
      height: 320px !important;
    }
  }
  .main{
    right: 8% !important;
  }
}

@media screen and (max-width: 1200px) {
  .loginBox{
    // width: 300px;
  }
  .banner {
    left: 5.6%;
    margin-top: 0;
    transform: translateY(-50%);
    img{
      width: 237px !important;
      height: 216px !important;
    }
  }
  .main{
    right: 5% !important;
  }
}

@media screen and (max-width: 1800px) and (min-width:1200px) {
  .loginBox{
    // width: 300px;
  }
  .banner {
    left: 5.6%;
    margin-top: 0;
    transform: translateY(-50%);
    img{
      width: 441px !important;
      height: 398px !important;
    }
  }
  .main{
    right: 5% !important;
  }
}

.outBoxContainer{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  width: 100%;
  height: 100%;
  .title1{
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36px;
    color: #000000;
    line-height: 44px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    span{
      color: #3E5BFF;
    }
  }
  .title2{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22px;
    color: rgba(0,0,0,0.9);
    line-height: 44px;
    text-align: left;
    font-style: normal;
  }

  .loginContainer{
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.1);
    border-radius: 6px;
    border: 2px solid #FFFFFF;
    padding: 36px;
    .loginTitle{
      font-weight: 500;
      font-size: 20px;
      color: #5E6C84;
      line-height: 22px;
      text-align: center;
      margin-bottom: 24px;
    }
    :global{
      .ant-input{
        height: 40px;
      }
      .ant-input-affix-wrapper .ant-input:not(:first-child){
        padding-left: 35px;
      }
    }
    .blockBtn{
      display: flex;
      align-items: center;
      justify-content: space-between;
      img{
        width: 20px;
      }
    }
  }
}

.userSelect{
  background: #FFFFFF;
  padding: 32px;
  border-radius: 6px 6px 6px 6px;
  .userItem{
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #DCDCDC;
    padding: 32px;
    height: 100%;
  }
  .itemTop{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    .topLeft{
      font-family: PingFang SC, PingFang SC;
      .name{
        font-weight: bold;
        font-size: 16px;
        color: rgba(0,0,0,0.9);
        line-height: 28px;
      }
      .time{
        font-weight: 400;
        font-size: 12px;
        color: rgba(0,0,0,0.4);
        line-height: 22px;
      }
    }
    .topRight{
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #D9E1FF;
      border-radius: 50%;
      flex-shrink: 0;
      img {
        width: 32px;
      }
    }
  }
  .itemBottom{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    .rolItem{
      padding:0 8px;
      background: #E7E7E7;
      border-radius: 3px 3px 3px 3px;
      font-weight: 400;
      font-size: 12px;
      color: rgba(0,0,0,0.9);
      line-height: 24px;
    }
  }


}

.userList{
  display: flex;
  width: 100%;
  align-items: stretch;
  flex-wrap: wrap;
}



